<template>
  <div class="flex direction-column height-100 fixed-page visual-page">
    <div class="query-box flex align-center">
      <el-tooltip content="返回">
        <el-button
          type="primary" icon="el-icon-arrow-left" circle style="margin-bottom: 18px;margin-right: 10px;"
          @click="$router.go(-1)"
        ></el-button>
      </el-tooltip>
      <el-form :model="qs" inline>
        <el-form-item label="数据统计周期">
          <el-date-picker
            type="daterange" v-model="qs.daterange"
            value-format="yyyy-MM-dd" format="yyyy-MM-dd"
            start-placeholder="开始日期" end-placeholder="结束日期"
            range-separator="至"
          ></el-date-picker>
        </el-form-item>
      </el-form>
    </div>
    <div class="content-box">
      <box-item-one title="能源消费数据看板" :info="item1Info"></box-item-one>
      <box-item-two :info="item2Info"></box-item-two>
      <box-item-three title="综合能源消费量区域排名" :info="item3Info"></box-item-three>
      <box-item-four title="综合能源消费量趋势变化" :info="item4Info"></box-item-four>
      <box-item-five title="综合能源消费量占比统计" :info="item5Info"></box-item-five>
    </div>
  </div>
</template>

<script>
import BoxItemOne from '@/views/government-work-bench/box-item-one'
import BoxItemTwo from '@/views/government-work-bench/box-item-two'
import BoxItemThree from '@/views/government-work-bench/box-item-three'
import BoxItemFour from '@/views/government-work-bench/box-item-four'
import BoxItemFive from '@/views/government-work-bench/box-item-five'

export default {
  name: 'government-work-bench',
  components: {
    BoxItemFive,
    BoxItemFour,
    BoxItemThree,
    BoxItemTwo,
    BoxItemOne
  },
  data () {
    return {
      qs: {
        daterange: []
      },
      item1Info: [
        {
          title: '综合能源消费量',
          count: '1971.98',
          unit: '万吨标准煤'
        },
        {
          title: '煤炭消费量',
          count: '2812.56',
          unit: '万吨'
        },
        {
          title: '电力消费量',
          count: '100.98',
          unit: '亿千瓦时'
        },
        {
          title: '工业总产量',
          count: '5960.31',
          unit: '亿元'
        },
        {
          title: '万元工业产值综合能耗',
          count: '222.51',
          unit: '吨标准煤/万元'
        },
      ],
      item2Info: [
        {
          title: '"十三五"能耗强度控制目标',
          count: '17',
          unit: '%'
        },
        {
          title: '"十三五"能耗增量控制目标',
          count: '257',
          unit: '万吨标准煤'
        },
        {
          title: '2023年煤炭消费当量控制目标',
          count: '3460',
          unit: '万吨'
        },
      ],
      item3Info: [
        { name: '安义县', value: '2310.23' },
        { name: '南昌县', value: '1500.9' },
        { name: '进贤县', value: '1002.5' },
        { name: '东湖区', value: '900.4' },
        { name: '西湖区', value: '850.23' },
        { name: '青山湖区', value: '800.7' },
        { name: '红谷滩区', value: '750.23' },
        { name: '新建区', value: '620.23' },
        { name: '青云谱区', value: '500.23' },
      ],
      item4Info: [
        { name: '安义县', value: '2310.23' },
        { name: '南昌县', value: '1500.9' },
        { name: '进贤县', value: '1002.5' },
        { name: '东湖区', value: '900.4' },
        { name: '西湖区', value: '850.23' },
        { name: '青山湖区', value: '800.7' },
        { name: '红谷滩区', value: '750.23' },
        { name: '新建区', value: '620.23' },
        { name: '青云谱区', value: '500.23' },
      ],
      item5Info: [
        { name: '安义县', value: '2310.23' },
        { name: '南昌县', value: '1500.9' },
        { name: '进贤县', value: '1002.5' },
        { name: '东湖区', value: '900.4' },
        { name: '西湖区', value: '850.23' },
        { name: '青山湖区', value: '800.7' },
        { name: '红谷滩区', value: '750.23' },
        { name: '新建区', value: '620.23' },
        { name: '青云谱区', value: '500.23' },
      ]
    }
  },
  computed: {
    startDate () {
      const daterange = this.qs.daterange
      return daterange[0]
    },
    endDate () {
      const daterange = this.qs.daterange
      return daterange[1]
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/style/variable.scss";

.content-box {
  flex: 1;
  display: grid;
  grid-template-columns: 400px minmax(400px, auto) 400px;
  grid-template-rows: 1fr 1fr;
  grid-gap: $gutter;

  ::v-deep .box-item {
    background: transparent;
    color: var(--theme-color-light);
    border-radius: 4px;
    box-shadow: 0 0 12px 2px rgba(0, 0, 0, 0.02);
  }

  ::v-deep .item-center {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
  }

  ::v-deep .scrollbar-wrap {
    height: 320px;
    overflow-x: hidden;
  }

  ::v-deep .box-item-title {
    padding: $gutter;
    font-size: 1.2em;
  }

  ::v-deep .data-number {
    font-size: 16px;
  }

  ::v-deep .data-unit {
    font-size: 12px;
    margin-left: .4em;
    color: #909399;
  }
}

</style>
